import React, { Suspense } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import routerlist from './RouterConfig'
import { RouterItem, RouterList } from '../utils'

type Props = {}

const RouterView = (props: Props) => {
  const routerrender = (arr: RouterList) => {
    return arr.map((v: RouterItem, i: number) => {
      return (
        <Route key={i} path={v.path} element={v.to ? <Navigate to={v.to}></Navigate> : <v.element></v.element>}>
          {v.children ? routerrender(v.children) : undefined}
        </Route>
      )
    })
  }
  return (
    <Suspense fallback={<div>jzz...</div>}>
      <Routes>{routerrender(routerlist)}</Routes>
    </Suspense>
  )
}

export default RouterView
